<template>
    <div class="pop-good-filling">
        <div class="context-box comm-list">
            <div class="good-info">
                <div class="img-box">
                    <img :src="info_data.imgs ? info_data.imgs[0] : img_buf" />
                </div>
                <div class="info-box">
                    <div class="title">{{ info_data.title }}</div>
                    <div class="pic">{{ info_data.price }}</div>
                </div>
            </div>
            <div class="spec-pic-box" v-if="spec_data1.length > 0">
                <div class="spec-box-1">
                    <div
                        class="spec-row"
                        v-for="(item, index) in spec_data1"
                        :key="index"
                        :class="item.is_acitve ? 'acitve' : ''"
                        @click="switchSkuFun1(item)"
                    >
                        <span
                            >{{ item.title
                            }}{{
                                item.all_num > 0 ? `(${item.all_num})` : ""
                            }}</span
                        >
                    </div>
                </div>
                <div class="spec-box-2" v-show="spec_data2.length > 0">
                    <div
                        class="spec-row"
                        v-for="(item, index) in spec_data2"
                        :key="index"
                        :class="item.is_acitve ? 'acitve' : ''"
                        @click="switchSkuFun2(item)"
                    >
                        <span
                            >{{ item.title
                            }}{{
                                item.all_num > 0 ? `(${item.all_num})` : ""
                            }}</span
                        >
                    </div>
                </div>
                <div class="spec-box-3">
                    <div
                        class="spec-row"
                        v-for="(item, index) in spec_data3"
                        :key="index"
                    >
                        <div class="spec-title" v-if="item.title">
                            {{ item.title }}
                        </div>
                        <div
                            class="unit-row"
                            v-for="(item_unit, index_unit) in item.unit_ls"
                            :key="index_unit"
                        >
                            <div class="unit-info">
                                <div class="input-box">
                                    <div class="input-pic">
                                        <el-dropdown
                                            @visible-change="
                                                item_unit.is_acitve =
                                                    !item_unit.is_acitve
                                            "
                                            trigger="click"
                                            placement="bottom-start"
                                            @command="
                                                commandFun(item_unit, $event)
                                            "
                                        >
                                            <span class="title-pic ac-select"
                                                >划线价
                                                <i
                                                    :class="
                                                        item_unit.is_acitve
                                                            ? 'el-icon-arrow-up'
                                                            : 'el-icon-arrow-down'
                                                    "
                                                ></i
                                            ></span>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item
                                                    :command="item_prices.price"
                                                    v-for="(
                                                        item_prices,
                                                        index_prices
                                                    ) in item_unit.prices"
                                                    :key="index_prices"
                                                    >{{
                                                        item_prices.title
                                                    }}</el-dropdown-item
                                                >
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                        <el-input
                                            v-model="item_unit.pricec"
                                            size="small"
                                            placeholder="请输入产品价格"
                                            class="input-w"
                                        ></el-input>
                                    </div>
                                    <div class="input-pic">
                                        <span class="title-pic">活动价</span>
                                        <el-input
                                            v-model="item_unit.price"
                                            size="small"
                                            class="input-w"
                                            placeholder="请输入产品活动价"
                                        ></el-input>
                                    </div>
                                    <div class="input-pic">
                                        <el-input-number
                                            v-model="item_unit.number"
                                            size="small"
                                            :min="0"
                                            @change="changeQuantity(item_unit)"
                                        ></el-input-number>
                                    </div>
                                </div>
                                <div class="unit-title">
                                    {{ item_unit.title }}
                                </div>
                            </div>

                            <div class="txt-box">
                                <div class="title-txt">备注：</div>
                                <el-input
                                    v-model="item_unit.txt"
                                    size="small"
                                    class="input-w"
                                    placeholder="请输入备注信息（200字内）"
                                    maxlength="200"
                                    show-word-limit
                                ></el-input>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <div class="num">
                <span>数量：{{ parseInt(totalNum) }}</span
                ><span>总额：{{ parseFloat(totalpic.toFixed(2)) }}</span>
            </div>
            <div class="but">
                <el-button @click="cancelFun">取 消</el-button>
                <el-button type="danger" @click="emptyFilling">清 空</el-button>
                <el-button type="primary" @click="determineFilling"
                    >确 定</el-button
                >
            </div>
        </span>
    </div>
</template>

<script>
import config from "@/js/conf/Config.js";
import staticConst from "@/js/const/StaticConst.js";

export default {
    data() {
        return {
            img_buf: staticConst.GOOD_IMG,
            info_data: {},
            sku_list_data: [],
            gd_data: {},
            spec_data1: [], //sku总数据(一级)
            spec_data2: [], //(二级)
            spec_data3: [], //(三级)
        };
    },
    computed: {
        totalNum() {
            let num = 0;
            this.spec_data1.map((v) => {
                if (v.list) {
                    v.list.map((vs) => {
                        if (vs.list) {
                            vs.list.map((vw) => {
                                vw.unit_ls.map((vk) => {
                                    num += Number(vk.number);
                                });
                            });
                        } else {
                            vs.unit_ls.map((vw) => {
                                num += Number(vw.number);
                            });
                        }
                    });
                } else {
                    v.unit_ls.map((vs) => {
                        num += Number(vs.number);
                    });
                }
            });
            return num;
        },
        totalpic() {
            let num = 0;
            this.spec_data1.map((v) => {
                if (v.list) {
                    v.list.map((vs) => {
                        if (vs.list) {
                            vs.list.map((vw) => {
                                vw.unit_ls.map((vk) => {
                                    num += Number(vk.price) * Number(vk.number);
                                });
                            });
                        } else {
                            vs.unit_ls.map((vw) => {
                                num += Number(vw.price) * Number(vw.number);
                            });
                        }
                    });
                } else {
                    v.unit_ls.map((vs) => {
                        num += Number(vs.price) * Number(vs.number);
                    });
                }
            });
            return num;
        },
    },
    methods: {
        async initData(data) {
            this.emptyData();
            this.gd_data = data;
            await this.getGoodInfo();
            await this.getGoodspecInfo();
        },
        async editSkuinfo(data) {
            this.emptyData();
            this.spec_data1 = data.spec_data;
            this.switchSkuFun1(data.spec_data[0]);
            this.gd_data = data;
            await this.getGoodInfo();
        },
        // 改变数量
        changeQuantity(item) {
            this.spec_data1.map((v) => {
                if (v.id == item.fid) {
                    v.all_num++;
                }
                if (v.id == item.did) {
                    v.all_num++;
                }
                if (v.list) {
                    v.list.map((vs) => {
                        if (vs.id == item.fid) {
                            vs.all_num++;
                        }
                    });
                }
            });
        },
        // 选择一级规格
        switchSkuFun1(item) {
            this.spec_data1.map((v) => {
                if (v.id == item.id) {
                    v.is_acitve = true;
                } else {
                    v.is_acitve = false;
                }
            });
            if (item.list) {
                item.list.map((v, i) => {
                    if (i == 0) {
                        v.is_acitve = true;
                    } else {
                        v.is_acitve = false;
                    }
                });
                this.spec_data2 = item.list;
                if (item.list[0].list) {
                    this.spec_data3 = item.list[0].list;
                } else {
                    this.spec_data3 = [
                        {
                            unit_ls: item.list[0].unit_ls,
                        },
                    ];
                }
            } else {
                this.spec_data2 = [];
                this.spec_data3 = [
                    {
                        unit_ls: item.unit_ls,
                    },
                ];
            }
        },
        // 选择二级规格
        switchSkuFun2(item) {
            this.spec_data2.map((v) => {
                if (v.id == item.id) {
                    v.is_acitve = true;
                } else {
                    v.is_acitve = false;
                }
            });
            if (item.list) {
                this.spec_data3 = item.list;
            } else {
                this.spec_data3 = [
                    {
                        unit_ls: item.unit_ls,
                    },
                ];
            }
        },
        // 选择价格档
        commandFun(item, val) {
            item.price = val;
            item.pricec = val;
        },
        // 获取产品规格详情
        async getGoodspecInfo() {
            if (this.gd_data.spec_data) {
                this.spec_data1 = this.gd_data.spec_data;
                this.switchSkuFun1(this.gd_data.spec_data[0]);
            } else {
                let url = config.GOODSINFO_GOODS_SPEC;
                let param = {
                    goods_id: this.gd_data.id,
                };
                let res = await this.$api({ url: url, data: param });
                if (res.status == 1 && res.data) {
                    if (
                        res.data.price_ls.price_ls &&
                        res.data.price_ls.gd_price
                    ) {
                        res.data.price_ls.price_ls.map((v) => {
                            if (v.prices) {
                                v.prices.map((vs) => {
                                    res.data.price_ls.gd_price.map((vw) => {
                                        if (vs.price_i == vw.psort) {
                                            vs.title = vw.title;
                                        }
                                    });
                                });
                            }
                        });
                    }
                    if (res.data.unit_ls) {
                        res.data.unit_ls.map((v, i) => {
                            if (res.data.price_ls.price_ls) {
                                res.data.price_ls.price_ls.map((vs) => {
                                    if (v.unit_id == vs.unitid) {
                                        v.prices = vs.prices;
                                    }
                                    vs.prices.map((vw, vi) => {
                                        if (i == vi) {
                                            v.price = vw.price;
                                            v.pricec = vw.price;
                                            v.number = 0;
                                        }
                                    });
                                });
                            }
                        });
                    }
                    if (res.data.spec_ls) {
                        res.data.spec_ls.map((v, i) => {
                            if (i == 0) {
                                v.is_acitve = true;
                            } else {
                                v.is_acitve = false;
                            }
                            v.all_num = 0;
                            if (v.list) {
                                v.list.map((vs, vi) => {
                                    if (vi == 0) {
                                        vs.is_acitve = true;
                                    } else {
                                        vs.is_acitve = false;
                                    }
                                    vs.all_num = 0;
                                    if (vs.list) {
                                        vs.list.map((vw) => {
                                            vw.unit_ls = [];
                                            res.data.unit_ls.map((vu) => {
                                                vw.unit_ls.push({
                                                    md: "xs",
                                                    img: this.gd_data.imgs,
                                                    gd_title:
                                                        this.gd_data.title,
                                                    gdid: this.gd_data.id,
                                                    price: vu.price,
                                                    pricec: vu.pricec,
                                                    number: vu.number,
                                                    ismin: vu.ismin,
                                                    title: vu.title,
                                                    unit_id: vu.unit_id,
                                                    vch: vu.vch,
                                                    prices: vu.prices,
                                                    is_acitve: false,
                                                    fid: vs.id,
                                                    did: vs.fid,
                                                    spec_dir: `${vs.fid},${vs.id}`,
                                                    specid: vw.id,
                                                    doc: `${v.title}|${vs.title}|${vw.title}`,
                                                    txt: "",
                                                });
                                            });
                                        });
                                    } else {
                                        vs.unit_ls = [];
                                        res.data.unit_ls.map((vu) => {
                                            vs.unit_ls.push({
                                                md: "xs",
                                                img: this.gd_data.imgs,
                                                gd_title: this.gd_data.title,
                                                gdid: this.gd_data.id,
                                                price: vu.price,
                                                pricec: vu.pricec,
                                                number: vu.number,
                                                ismin: vu.ismin,
                                                title: vu.title,
                                                unit_id: vu.unit_id,
                                                vch: vu.vch,
                                                prices: vu.prices,
                                                is_acitve: false,
                                                fid: vs.id,
                                                did: vs.fid,
                                                spec_dir: vs.fid,
                                                specid: vs.id,
                                                doc: `${v.title}|${vs.title}`,
                                                txt: "",
                                            });
                                        });
                                    }
                                });
                            } else {
                                v.unit_ls = [];
                                res.data.unit_ls.map((vu) => {
                                    v.unit_ls.push({
                                        md: "xs",
                                        img: this.gd_data.imgs,
                                        gd_title: this.gd_data.title,
                                        gdid: this.gd_data.id,
                                        price: vu.price,
                                        pricec: vu.pricec,
                                        number: vu.number,
                                        ismin: vu.ismin,
                                        title: vu.title,
                                        unit_id: vu.unit_id,
                                        vch: vu.vch,
                                        prices: vu.prices,
                                        is_acitve: false,
                                        fid: v.id,
                                        spec_dir: "",
                                        specid: v.id,
                                        doc: v.title,
                                        txt: "",
                                    });
                                });
                            }
                        });
                        this.spec_data1 = res.data.spec_ls;
                        this.switchSkuFun1(res.data.spec_ls[0]);
                    }
                }
            }
        },
        // 获取产品详情
        async getGoodInfo() {
            let url = config.GOODSINFO_GOODS_DETAIL;
            let param = {
                goods_id: this.gd_data.id || this.gd_data.gdid,
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (res.data.goodsInfo) {
                    this.info_data = res.data.goodsInfo;
                }
            }
        },
        // 清空数据(初始化)
        emptyData() {
            this.info_data = {};
            this.sku_list_data = [];
            this.spec_data1 = [];
            this.spec_data2 = [];
            this.spec_data3 = [];
            this.gd_data = {};
        },
        // 取消按钮
        cancelFun() {
            this.$emit("cancelFun");
        },
        // 清空按钮
        async emptyFilling() {
            this.$confirm("确认清空当前填写的内容?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    await this.getGoodInfo();
                    await this.getGoodspecInfo();
                })
                .catch(() => {});
        },
        // 确定按钮
        determineFilling() {
            if (this.totalNum == 0) {
                this.$msg({ title: "请添加开单产品数量" });
                return;
            }
            const data = {
                spec_data: this.spec_data1,
                id: this.gd_data.id,
                total_num: parseInt(this.totalNum),
                total_pic: parseFloat(this.totalpic.toFixed(2)),
            };
            this.$emit("determineFilling", data);
        },
    },
};
</script>

<style lang="scss" scoped>
.pop-good-filling {
    .context-box {
        height: 582px;
        overflow: auto;
        font-size: 14px;
        .good-info {
            padding: 10px;
            display: flex;
            border-radius: 5px;
            background: #f2f2f2;
            margin-bottom: 10px;
            .img-box {
                width: 100px;
                height: 100px;
                border-radius: 5px;
                overflow: hidden;
                margin-right: 10px;
                background: #eaeaea;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .info-box {
                width: calc(100% - 110px);
                .title {
                    height: 70px;
                }
                .pic {
                    color: #fa4949;
                }
            }
        }
    }
    .dialog-footer {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .num {
            font-size: 14px;
            span {
                margin-right: 10px;
            }
        }
    }
    .spec-pic-box {
        .spec-box-1 {
            display: flex;
            flex-wrap: wrap;
            padding: 10px;
            padding-bottom: 0;
            margin-bottom: 10px;
            border-bottom: 1px solid #ede7e7;
            .spec-row {
                margin-bottom: 10px;
                cursor: pointer;
                margin-right: 20px;
                position: relative;

                &.acitve {
                    pointer-events: none;
                    color: #3388ff;
                    &::after {
                        content: " ";
                        position: absolute;
                        left: calc(50% - 3px);
                        bottom: -6px;
                        width: 6px;
                        height: 6px;
                        background: #3388ff;
                        border-radius: 50%;
                    }
                }
            }
        }
        .spec-box-2 {
            display: flex;
            flex-wrap: wrap;
            padding: 10px;
            padding-bottom: 0;
            margin-bottom: 10px;
            border-bottom: 1px solid #ede7e7;
            .spec-row {
                margin-bottom: 10px;
                cursor: pointer;
                margin-right: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 5px;
                padding: 0 10px;
                border: 1px solid #3388ff;
                color: #3388ff;
                &.acitve {
                    background: #3388ff;
                    color: #fff;
                    pointer-events: none;
                }
            }
        }
        .spec-box-3 {
            .spec-row {
                .spec-title {
                    background: #f2f2f2;
                    padding: 10px;
                    display: flex;
                    align-items: center;
                    margin-top: 20px;
                }
                .unit-row {
                    padding: 10px;
                    margin-bottom: 10px;
                    padding-bottom: 20px;
                    border-bottom: 1px solid #eaeaea;
                    .unit-info {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                    }
                    .input-box {
                        width: calc(100% - 100px);
                        display: flex;
                        margin-right: 10px;
                        .input-pic {
                            display: flex;
                            align-items: center;
                            margin-right: 20px;

                            .input-w {
                                width: 150px;
                            }
                            .title-pic {
                                margin-right: 10px;
                            }
                            .ac-select {
                                cursor: pointer;
                                i {
                                    margin-left: 3px;
                                }
                            }
                            .price-files {
                                .price-files-row {
                                    margin-bottom: 10px;
                                    &:last-child {
                                        margin: 0;
                                    }
                                }
                            }
                            ::v-deep.el-input-number {
                                .el-input__inner {
                                    pointer-events: none;
                                }
                            }
                        }
                    }
                    .unit-title {
                        width: 100px;
                        text-align: right;
                    }
                    .txt-box {
                        margin-top: 10px;
                        display: flex;
                        .title-txt {
                            width: 66px;
                            text-align: justify;
                            text-align-last: justify;
                            margin-right: 3px;
                        }
                        .input-w {
                            width: calc(100% - 70px);
                        }
                    }
                }
            }
        }
    }
}
</style>
